<template>
  <div id="Category">
    <el-row>
      <el-col :xs="24"
              :md="9">
        <section class="left">
          <navigation></navigation>
          <section class="content clearfix">
            <ul>
              <li>全部</li>
              <li>Nginx</li>
              <li>Mysql</li>
              <li>Python</li>
              <li>Linux</li>
              <li>PHP</li>
              <li>技术杂谈</li>
            </ul>
          </section>
        </section>
      </el-col>
      <el-col :xs="24"
              :md="15">
        <content-body></content-body>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Navigation from "../module/navigation";
import ContentBody from "../module/contendBody";
export default {
  components: {
    ContentBody,
    Navigation,
  },
};
</script>

<style lang="less" scoped>
#Category {
  width: 100%;
  height: 100%;

  @media (min-width: 992px) {
    .el-row,
    .el-col {
      height: 100%;
    }
  }

  .left {
    width: 100%;
    height: 100%;
    position: relative;

    .content {
      width: 100%;
      padding: 10px 0;
      text-align: left;
      z-index: 999;
      background-color: #fff;
      display: none;
      position: absolute;
      box-shadow: 0px 0px 10px 0px #eee;

      li {
        padding: 5px 20px;
        cursor: pointer;
      }
      li:hover {
        background-color: #ecf5ff;
      }
    }
    @media (min-width: 992px) {
      .content {
        box-sizing: border-box;
        padding: 0 20px;
        text-align: right;
        display: block;
        box-shadow: none;
      }
    }
  }
  .left:hover .content {
    display: block;
  }
}
</style>